<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title th:text="${user.userName} + ' 主页'"></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="ArtTemplate"/>
    <meta name="description" content="vCard"/>
    <link rel="stylesheet" type="text/css" href="/index/css/user-home.css"/>
</head>
<body class="bg-triangles">
<div class="preloader">
    <div class="preloader__wrap">
        <div class="circle-pulse">
            <div class="circle-pulse__1"></div>
            <div class="circle-pulse__2"></div>
        </div>
        <div class="preloader__progress">
            <span></span>
        </div>
    </div>
</div>
<main class="main">
    <div class="container gutter-top">
        <div class="row sticky-parent">
            <aside class="col-12 col-md-12 col-xl-3">
                <div class="sidebar box pb-0 sticky-column">
                    <div class="avatar avatar--80">
                        <div class="avatar__box">
                            <img th:src="${user.avatar}"/>
                        </div>
                    </div>
                    <div class="text-center">
                        <h3 class="title title--h3 sidebar__user-name">
                            <span class="weight--500" th:text="${user.userName}"></span>
                        </h3>
                        <div class="badge badge--gray">Creative Director</div>
                    </div>

                    <div class="sidebar__info box-inner box-inner--rounded">
                        <ul class="contacts-block">
                            <li class="contacts-block__item"
                                data-toggle="tooltip" data-placement="top"
                                title="Birthday">
                                <i class="font-icon icon-calendar"></i>
                                March 12, 1995
                            </li>
                            <li class="contacts-block__item" data-toggle="tooltip"
                                data-placement="top" title="Address">
                                <i class="font-icon icon-location"></i>Hong Kong, China
                            </li>
                            <li class="contacts-block__item" data-toggle="tooltip"
                                data-placement="top" title="E-mail">
                                <a href="mailto:example@mail.com">
                                    <i class="font-icon icon-envelope"></i>
                                    example@mail.com
                                </a>
                            </li>
                            <li class="contacts-block__item" data-toggle="tooltip"
                                data-placement="top" title="Phone">
                                <i class="font-icon icon-phone"></i>
                                +1 (070) 123-4567
                            </li>
                            <li class="contacts-block__item" data-toggle="tooltip"
                                data-placement="top" title="Skype">
                                <a href="">
                                    <i class="font-icon icon-skype"></i>
                                    Felecia_Brown
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </aside>
            <div class="col-12 col-md-12 col-xl-9">
                <div class="box pb-0">
                    <!-- Menu -->
                    <div class="circle-menu">
                        <div class="hamburger">
                            <div class="line"></div>
                            <div class="line"></div>
                            <div class="line"></div>
                        </div>
                    </div>
                    <div class="inner-menu is-active">
                        <ul class="nav" style="width: 100%;">
                            <li class="nav__item">
                                <a class="active" href="index.html">关于博主</a>
                            </li>
                            <li class="nav__item">
                                <a href="resume.html">最新文章</a>
                            </li>
                            <li class="nav__item">
                                <a href="portfolio.html">最热文章</a>
                            </li>
                            <li class="nav__item">
                                <a href="blog.html">博主资源</a>
                            </li>
                            <li class="nav__item">
                                <a href="contact.html">关注列表</a>
                            </li>
                        </ul>
                    </div>
                    <div class="pb-0 pb-sm-2">
                        <h1 class="title title--h1 title__separate">关于博主</h1>
                        <p>My job is to build your website so that it is functional and user-friendly but at the same
                            time attractive. Moreover, I add personal touch to your product and make sure that is
                            eye-catching and easy to use. My aim is to bring across your message and identity in the
                            most creative way. I created web design for many famous brand companies.</p>
                    </div>
                    <div class="box-inner pb-0">
                        <h2 class="title title--h3">What I'm Doing</h2>
                        <div class="row">
                            <div class="col-12 col-lg-6">
                                <div class="case-item box box__second">
                                    <img class="case-item__icon" src="/index/svg/icon/icon-design.svg" alt=""/>
                                    <div>
                                        <h3 class="title title--h5">Web Design</h3>
                                        <p class="case-item__caption">The most modern and high-quality design made at a
                                            professional level.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="case-item box box__second">
                                    <img class="case-item__icon" src="/index/svg/icon/icon-dev.svg" alt=""/>
                                    <div>
                                        <h3 class="title title--h5">Web Development</h3>
                                        <p class="case-item__caption">High-quality and professional development of sites
                                            at the professional level.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="case-item box box__second">
                                    <img class="case-item__icon" src="/index/svg/icon/icon-app.svg" alt=""/>
                                    <div>
                                        <h3 class="title title--h5">Mobile Apps</h3>
                                        <p class="case-item__caption">Professional development of applications for iOS
                                            and Android.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="case-item box box__second">
                                    <img class="case-item__icon" src="/index/svg/icon/icon-photo.svg" alt=""/>
                                    <div>
                                        <h3 class="title title--h5">Photography</h3>
                                        <p class="case-item__caption">I make high-quality photos of any category at a
                                            professional level.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <footer class="footer">© 2022 FileShare</footer>
            </div>
        </div>
    </div>
</main>

<div class="back-to-top"></div>

<svg class="svg-defs">
    <clipPath id="avatar-box">
        <path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"/>
    </clipPath>
    <clipPath id="avatar-hexagon">
        <path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"/>
    </clipPath>
</svg>

<script th:src="@{/plugins/jquery/3.3.1/jquery.min.js}"></script>
<script th:src="@{/index/js/user-home-plugins.js}"></script>
<script th:src="@{/plugins/bootstrap/4.1.3/bootstrap.min.js}"></script>
<script th:src="@{/index/js/common.js}"></script>
</body>
</html>
